<template>
  <div class="main">
    <dv-loading v-show="runFlag" class="loading">Loading...</dv-loading>
    <MainTitle :main-title="mainTitle" />
    <SystemSwitch class="system-buttons" :current-system="system" @setSystem="setSystem" />
    <div class="traffic">
      <Statistics ref="statistics" :system="system" class="statistics" />
      <Prediction ref="prediction" :system="system" class="prediction" @runFlagChange="runFlagChange" />
    </div>
  </div>
</template>

<script>
export default {
  components: {
    Prediction: () => import('./predict.vue'),
    Statistics: () => import('./statistics.vue'),
    MainTitle: () => import('@/components/MainTitle.vue'),
    SystemSwitch: () => import('@/components/SystemSwitch.vue')
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      system: 'hcda',
      // mainTitle: '能源流向- CDA流量统计和预测',
      runFlag: false
    }
  },
  computed: {
    mainTitle() {
      return '能源流向-' + this.title
    }
  },
  created() {
    this.$nextTick(() => {
      this.setSystem(this.system)
    })
  },
  methods: {
    runFlagChange(value) {
      this.runFlag = value
    },
    setSystem(type) {
      this.system = type
      console.log(this.system)
    }
  }
}
</script>

<style lang="scss" scoped>
  .main{
  background-image: url('~@assets/report/bg.png');
  background-size:100% 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 5rem;
  }
  .traffic{
    height: 83%;
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    flex-flow: column nowrap;
  }
  .statistics{
    height: 52%;
    width: 100%;
  }
  .prediction{
    width: 100%;
    height: 49%;
  }
  .system-buttons{
    margin-left: 4%;
    margin-bottom: 2rem;
  }
.loading{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
</style>
